.cont {
	margin-top: 100px;
	margin-left: 200px;
}

.bb {
	position: relative;
	width: 200px;
	height: 200px;
	background-color: #0f222b;
	/* background: #ddd; */
	border: 1px solid #ddd;
}

.bb:before,
.bb:after {
	content: " ";
	display: block;
	position: absolute;
	width: 220px;
	height: 220px;
	top: -10px;
	left: -10px;
	border: 2px solid #00FF00;
	z-index: 10;
	box-sizing: border-box;
	-webkit-animation: clipAni 4s infinite linear;
}

.bb:before {
	-webkit-animation-delay: -2s;
}

@keyframes clipAni {

	0%,
	100% {
		clip: rect(0px, 220px, 220px, 217px);
	}

	25% {
		clip: rect(0px, 220px, 3px, 0px);
	}

	50% {
		clip: rect(0px, 3px, 220px, 0px);
	}

	75% {
		clip: rect(217px, 220px, 220px, 0px);
	}
}

.bb:hover::after,
.bb:hover::before {
	background-color: rgba(255, 0, 0, 0.3);
}

html,
body {
	height: 100%;
}

body {
	position: relative;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}
